<template>
	<uni-popup v-if="loaded" ref="popup" type="bottom" :safeArea="safeArea" backgroundColor="#fff">
		<uni-nav-bar :title="title" :border="false" :rightText="$t('submit')" left-icon="left" @clickLeft="close" @clickRight="handleModifyClick" />
		<scroll-view class="modify-form full-width" scroll-y="true">
			<uni-forms v-if="loaded && formData.defectType === DEFECT_TYPE_TASK" ref="form" :modelValue="formData" :rules="rules" :label-width="80" label-align="left" label-position="top">
				<uni-forms-item :label="$t('defect.name')" name="defectName" required>
					<uni-easyinput type="text" v-model="formData.defectName" :placeholder="$t('defect.enter-name')" maxlength="128" />
				</uni-forms-item>
				<uni-forms-item :label="$t('priority')" name="defectLevel" required>
					<defect-level-picker v-model="formData.defectLevel"></defect-level-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('handle-by')" name="handleBy" required>
					<member-picker v-model="formData.handleBy" @open="hideTools" @close="showTools"></member-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('module')" name="moduleId">
					<module-picker v-model="formData.moduleId" @open="hideTools" @close="showTools"></module-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('plan-time')">
					<uni-datetime-picker v-model="planTimeRange" type="datetimerange" rangeSeparator="至" @show="hideTools" @change="showTools" @maskClick="showTools" />
				</uni-forms-item>
				<uni-forms-item :label="$t('describe')" name="defectDescribe">
					<uni-easyinput type="textarea" autoHeight v-model="formData.defectDescribe" :placeholder="$t('defect.enter-describe').toString()" maxlength="65535"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item :label="$t('image')" name="imgUrls">
					<upload-image v-model="formData.imgUrls" />
				</uni-forms-item>
				<uni-forms-item :label="$t('annex')" name="annexUrls">
					<upload-file v-model="formData.annexUrls" />
				</uni-forms-item>
			</uni-forms>
			<uni-forms v-else-if="loaded && formData.defectType === DEFECT_TYPE_DEMAND" ref="form" :modelValue="formData" :rules="rules" :label-width="80" label-align="left" label-position="top">
				<uni-forms-item :label="$t('defect.name')" name="defectName" required>
					<uni-easyinput type="text" v-model="formData.defectName" :placeholder="$t('defect.enter-name')" maxlength="128" />
				</uni-forms-item>
				<uni-forms-item :label="$t('sponsor')" name="sponsor">
					<uni-easyinput type="text" v-model="formData.sponsor" :placeholder="$t('enter-sponsor')" maxlength="128" />
				</uni-forms-item>
				<uni-forms-item :label="$t('describe')" name="defectDescribe">
					<uni-easyinput type="textarea" autoHeight v-model="formData.defectDescribe" :placeholder="$t('defect.enter-describe').toString()" maxlength="65535"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item :label="$t('image')" name="imgUrls">
					<upload-image v-model="formData.imgUrls" />
				</uni-forms-item>
				<uni-forms-item :label="$t('annex')" name="annexUrls">
					<upload-file v-model="formData.annexUrls" />
				</uni-forms-item>
			</uni-forms>
			<uni-forms v-else-if="loaded && formData.defectType === DEFECT_TYPE_BUG" ref="form" :modelValue="formData" :rules="rules" :label-width="80" label-align="left" label-position="top">
				<uni-forms-item :label="$t('defect.name')" name="defectName" required>
					<uni-easyinput type="text" v-model="formData.defectName" :placeholder="$t('defect.enter-name')" maxlength="128" />
				</uni-forms-item>
				<uni-forms-item :label="$t('priority')" name="defectLevel" required>
					<defect-level-picker v-model="formData.defectLevel"></defect-level-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('handle-by')" name="handleBy" required>
					<member-picker v-model="formData.handleBy" @open="hideTools" @close="showTools"></member-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('module')" name="moduleId">
					<module-picker v-model="formData.moduleId" @open="hideTools" @close="showTools"></module-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('plan-time')">
					<uni-datetime-picker v-model="planTimeRange" type="datetimerange" rangeSeparator="至" @show="hideTools" @change="showTools" @maskClick="showTools" />
				</uni-forms-item>
				<uni-forms-item :label="$t('describe')" name="defectDescribe">
					<uni-easyinput type="textarea" autoHeight v-model="formData.defectDescribe" :placeholder="$t('defect.enter-describe').toString()" maxlength="65535"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item :label="$t('case')" name="caseId">
					<case-picker v-model="formData.caseId" :case-step-id="formData.caseStepId" :module-id="formData.moduleId" @open="hideTools" @close="showTools" @input="handleCaseChange"></case-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('image')" name="imgUrls">
					<upload-image v-model="formData.imgUrls" />
				</uni-forms-item>
				<uni-forms-item :label="$t('annex')" name="annexUrls">
					<upload-file v-model="formData.annexUrls" />
				</uni-forms-item>
			</uni-forms>
		</scroll-view>
	</uni-popup>
</template>

<script>
	import { DEFECT_TYPE_TASK, DEFECT_TYPE_DEMAND, DEFECT_TYPE_BUG } from "@/utils/defect.js"
	import { makeDefect } from "@/api/ai/AiDefect"
	import { updateDefect } from "@/api/system/defect";
	import MemberPicker from "@/components/member/member-picker/index.vue"
	import DefectLevelPicker from "@/components/defect/defect-level-picker/index.vue"
	import ModulePicker from "@/components/module/module-picker/index.vue"
	import UploadImage from "@/components/upload-image/index.vue"
	import UploadFile from "@/components/upload-file/index.vue"
	import CasePicker from "@/components/case/case-picker/index.vue"
	
	/** 开启对话框 */
	export default {
		name: 'ModifyPopup',
		components: { MemberPicker, DefectLevelPicker, ModulePicker, UploadImage, UploadFile, CasePicker },
		data() {
			return {
				DEFECT_TYPE_TASK: DEFECT_TYPE_TASK, 
				DEFECT_TYPE_DEMAND: DEFECT_TYPE_DEMAND,
				DEFECT_TYPE_BUG: DEFECT_TYPE_BUG,
				formData: {
					moduleId: 0,
					imgUrls: '',
					annexUrls: '',
					handleBy: []
				},
				rules: {
					defectName: {
						rules: [{
							required: true,
							errorMessage: this.$i18n.t('defect.defect-name-cannot-empty'),
						}]
					},
					defectLevel: {
						rules: [{
							required: true,
							errorMessage: this.$i18n.t('defect.defect-level-cannot-empty')
						}]
					},
					handleBy: {
						rules: [{
							required: true,
							errorMessage: this.$i18n.t('defect.handle-by-cannot-empty')
						}]
					},
				},
			}
		}, 
		props: {
			safeArea: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			/** UI是否加载完成 */
			loaded: function() {
				return this.$i18n.locale?true:false;
			},
			/** 弹框标题 */
			title: function() {
				return this.$i18n.t('modify')+this.$i18n.t(this.formData.defectType);
			}
		},
		methods: {
			/** 打开弹簧 */
			open(defect) {
				this.formData = {...defect};
				if(this.$refs.popup) {
					this.$refs.popup.open('bottom');
				}
			},
			/** 关闭弹框 */
			close() {
				this.$refs.popup.close();
			},
			/** 处理提交指派功能 */
			handleModifyClick() {
				this.$refs.form.validate().then(valid => {
					updateDefect(this.formData).then(res => {
						this.$modal.msgSuccess(this.$i18n.t('modify-success'));
						this.close();
						this.$emit('log', this.formData);
					}).catch(err=>{
						uni.showToast({
							title: err
						})
					});
				}).catch(err=>{
					uni.showToast({
						title: err
					})
				});
			},
			/** 处理用例的改变 */
			handleCaseChange(caseId, caseStepId) {
				this.formData.caseId = caseId;
				this.formData.caseStepId = caseStepId;
			},
			showTools() {
				
			},
			hideTools() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modify-form {
		padding: 0 40rpx;
		height: 70vh;
		margin: 0;
	}
</style>